<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <title>Extended clustering example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <style type="text/css">
            label {
                cursor: pointer
            }
            
            #wrap {
                width: 925px;
                margin: 10px;
            }
            
            #strategy-chooser, #generalinfo, #info {
                width: 400px;
                padding: 0;
                float: right;
                clear: right;
                margin-bottom: 4px;
            }
            
            #map {
                float: left;
            }
        </style>
    </head>
    <body>
        <h1 id="title">Extended clustering</h1>
        <div id="tags">
            cluster, advanced
        </div>
        <p id="shortdesc">
            Shows the usage of custom classes for a fine grained control about 
            the clustering behaviour.
        </p>
        <div id="wrap">
            <div id="map" class="smallmap">
            </div>
            <div id="strategy-chooser">
                <p>
                    Select the desired clustering strategy:
                </p>
                <label>
                    <input type="radio" name="strategy" value="none" id="no-strategy" checked="checked">No strategy
                </label>
                <br>
                <label>
                    <input type="radio" name="strategy" value="cluster" id="cluster-strategy">Simple cluster-strategy
                </label>
                <br>
                <label>
                    <input type="radio" name="strategy" value="attribute-cluster" id="attributive-cluster-strategy">Attributive cluster-strategy
                </label>
                <br>
                <label>
                    <input type="radio" name="strategy" value="rule-cluster" id="rulebased-cluster-strategy">Rulebased cluster-strategy
                </label>
            </div>
            <div id="generalinfo">
            </div>
            <div id="info">
            </div>
        </div>
        <div id="docs" style="clear: both; padding-top: 10px">
            <p>
                The vectorlayer in this example contains random data with an 
                attribute "clazz" that can take the values 1, 2, 3 and 4. The  
                features with clazz = 4 are considered more important than the 
                others.
            </p>
            <p>
                The radiobuttons on the right of the map control the 
                cluster strategy to be applied to the features.
            </p>
            <ul>
                <li>
                    <strong>No strategy</strong>
                    means that all features are 
                    rendered, no clustering shall be applied
                </li>
                <li>
                    <strong>Simple cluster-strategy</strong>
                    applies the cluster 
                    strategy with default options to the layer. You should notice 
                    that many of the important features with clazz = 4 are getting
                    lost, since clustering happens regardless of feature attributes
                </li>
                <li>
                    <strong>Attributive cluster-strategy</strong>
                    uses a 
                    customized cluster strategy. This strategy is configured to 
                    cluster features of the same clazz only. You should be able to see all 
                    red points (clazz = 4) even though the data is clustered. A 
                    cluster now contains only features of the same clazz.
                </li>
                <li>
                    <strong>Rulebased cluster-strategy</strong>
                    uses another 
                    customized cluster strategy. This strategy is configured to  
                    cluster features that follow a certain rule only. In this case only  
                    features with a clazz different from 4 are considered as 
                    candidates for clustering. That means that usually you have fewer 
                    clusters on the map, yet all with clazz = 4 are easily 
                    distinguishable
                </li>
            </ul>
            <p>
                Hover over the features to get a short infomation about the 
                feature or cluster of features. 
            </p>
        </div>
        <p>
            View the <a href="strategy-cluster-extended.js" target="_blank">strategy-cluster-extended.js</a>
            source to see how this is done.
        </p>
        <script type="text/javascript" src="../lib/OpenLayers.js"></script>
        <script type="text/javascript" src="strategy-cluster-extended.js"></script>
    </body>
</html>
